<template>
  <a-drawer
    wrapClassName="police-list-drawer"
    :title="`${title}警情`"
    placement="right"
    :closable="false"
    :visible="visible"
    v-if="visible"
    @close="onClose"
    :destroyOnClose="destroyOnClose"
    width="1100"
  >
    <a-card class="header" v-if="handleisEmpt(headerInfo)">
      <div class="header-title" v-if="handleisEmpt(headerTile)">
        <span v-if="headerTile.time">{{ headerTile.time }}</span>
        <span v-if="headerTile.type" style="margin-left: 10px">{{ headerTile.type }}</span>
        <span v-if="headerTile.name">【{{ headerTile.name }}】</span>
      </div>
      <div>
        <div class="echartinfo">
          <span>[警情数]</span>
          <span>
            <span>
              当前警情
              <span style="text-decoration: underline">
                {{ headerInfo.count }}
              </span>
            </span>
            <span v-if="headerInfo.yoyCount">
              去年同期
              <span style="text-decoration: underline">
                {{ headerInfo.yoyCount }}
              </span>
            </span>
            &nbsp;
            <span style="margin: 0 10px" v-if="headerInfo.yoyPercent">
              同比：{{ headerInfo.yoyPercent }}%
            </span>
            <span v-if="headerInfo.chainPercent">环比：{{ headerInfo.chainPercent }}%</span>
          </span>
        </div>
        <div class="echartinfo" v-if="headerInfo.xqdwTop3.length">
          <span>[辖区排名]</span>
          <span v-for="(item, index) in headerInfo.xqdwTop3" :key="index" style="margin-right: 8px">
            <span>
              {{ item.xqdwName }}：{{ item.count }}
              <span v-if="item.percent">({{ item.percent }}%)</span>
            </span>
          </span>
        </div>
      </div>
    </a-card>
    <a-tabs v-if="tabs.length > 1" type="card" v-model:activeKey="tabKey" @change="handelchange">
      <a-tab-pane
        :forceRender="true"
        v-for="(item, index) in tabsList"
        :key="index"
        :tab="item.name + `(${item.num ? item.num : '0'})`"
      ></a-tab-pane>
    </a-tabs>
    <list
      :scrollTarget="getScrollTarget"
      :portionUrl="currentPortionUrl"
      :params="currentParams"
      @change="handleList"
      @ready="readyHandle"
      :buttonList="btnList"
      :topicType="currentType"
      :tabs="tabs.length"
      @setTop3list="handleTop3List"
    />
  </a-drawer>
</template>
<script lang="ts">
import { omit, isEmpty } from 'lodash-es';
import list from '../police-list/index.vue';
import { ref, defineComponent, watch, PropType, createVNode, watchEffect, toRaw } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
// import { exportExcel } from '@/api/intelligentanalysis/alert';
import { post } from '@/utils/request';
import { downloadForm } from '@/utils/download';
import { Modal } from 'ant-design-vue';
interface Tab {
  name: string;
  url: string;
  params: any;
  type?: string;
}
export default defineComponent({
  name: '',
  components: {
    list,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    portionUrl: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
    topicType: {
      type: String,
      default: 'ai',
    },
    visible: {
      type: Boolean,
    },
    headerTile: {
      type: Object,
      default: () => {
        return {};
      },
    },
    tabs: {
      type: Array as PropType<Tab[]>,
      default: () => {
        return [];
      },
    },
    date: {},
  },
  setup(props, { emit }) {
    const destroyOnClose = ref<boolean>(true);
    const tabKey = ref<number>(0);
    const total = ref<number>(0);
    const currentType = ref('');
    const handleisEmpt = value => {
      return !isEmpty(value);
    };
    //导出
    const exportHandle = () => {
      const params = omit(toRaw(currentParams.value), ['page', 'size']);
      if (caseNos.value.length) {
        let obj = Object.assign({ caseNos: caseNos.value }, params);
        exportFile(obj);
      } else {
        if (total.value > 50000) {
          Modal.error({
            title: '提示',
            icon: createVNode(ExclamationCircleOutlined),
            content: '全部警情数量大于5W,请选择手动点击导出的数据!',
          });
        } else {
          Modal.confirm({
            title: '提示',
            icon: createVNode(ExclamationCircleOutlined),
            content: '是否导出全部数据？',
            okText: '确认',
            cancelText: '取消',
            onOk() {
              let obj = Object.assign({ caseNos: '' }, params);
              exportFile(obj);
            },
          });
        }
      }
    };

    const btnList = ref([
      {
        type: '',
        name: '导出',
        clickHandle: exportHandle,
        loading: false,
        disabled: true,
      },
    ]);
    const exportFile = params => {
      /**
       * isEssential 判断是否事要素
       * grain 判断是否颗粒导出
       * **/
      if (params.isEssential) {
        downloadForm((window as any).g.baseURL + '/series/detail/exportExcel', params);
      } else if (params.grain) {
        downloadForm((window as any).g.baseURL + '/aitype/caseInfo/exportCaseListExcel', params);
      } else {
        downloadForm((window as any).g.baseURL + '/aitype/caseInfo/exportExcel', params);
      }
    };

    const readyHandle = val => {
      total.value = val;
    };
    watchEffect(() => {
      btnList.value[0].disabled = total.value === 0;
    });

    const onClose = () => {
      emit('update:visible', false);
    };
    const tabChange = () => {};

    const caseNos = ref<any>([]);
    const handleList = value => {
      caseNos.value = value.toString();
    };

    const currentPortionUrl = ref('');
    const currentParams = ref({});
    const getScrollTarget = () => {
      return document.querySelector('.police-list-drawer .ant-drawer-wrapper-body');
    };
    const handelchange = () => {
      caseNos.value = [];
    };

    const tabsList = ref<any>([]);
    const urlList = arr => {
      tabsList.value = arr.forEach(item => {
        post(item.url, item.params).then(res => {
          item.num = res.data.count;
        });
      });
      return arr;
    };
    const headerInfo = ref<any>({});
    const handleTop3List = value => {
      headerInfo.value = value;
    };
    const divide = (num1, num2) => {
      let t1, t2, r1, r2;
      try {
        t1 = num1.toString().split('.')[1].length;
      } catch (e) {
        t1 = 0;
      }
      try {
        t2 = num2.toString().split('.')[1].length;
      } catch (e) {
        t2 = 0;
      }
      r1 = Number(num1.toString().replace('.', ''));
      r2 = Number(num2.toString().replace('.', ''));
      let number = (r1 / r2) * Math.pow(10, t2 - t1) * 100;
      return number.toFixed(2) + '%';
    };
    watch(
      () => [props.params, props.topicType],
      () => {
        tabKey.value = 0;
        currentType.value = props.topicType;
        currentPortionUrl.value = props.portionUrl;
        currentParams.value = props.params;
        caseNos.value = [];
      },
      {
        deep: true,
      },
    );

    watch(
      () => props.tabs,
      () => {
        tabKey.value = 0;
        currentPortionUrl.value = props.tabs[tabKey.value].url;
        currentParams.value = props.tabs[tabKey.value].params;
        currentType.value = props.tabs[tabKey.value].type || '';
        caseNos.value = [];
        tabsList.value = urlList(props.tabs);
      },
      {
        deep: true,
      },
    );
    watch(
      () => tabKey.value,
      () => {
        currentPortionUrl.value = props.tabs[tabKey.value].url;
        currentParams.value = props.tabs[tabKey.value].params;
        currentType.value = props.tabs[tabKey.value].type || '';
      },
    );

    return {
      headerInfo,
      handleTop3List,
      divide,
      handleList,
      onClose,
      tabKey,
      tabChange,
      readyHandle,
      destroyOnClose,
      labelCol: { span: 4 },
      wrapperCol: { span: 15 },
      btnList,
      currentPortionUrl,
      currentParams,
      getScrollTarget,
      handelchange,
      currentType,
      tabsList,
      handleisEmpt,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.ant-card-body) {
  padding: 10px;
}
.echartinfo {
  color: #b9c4dd;
}
.textRt {
  margin-right: 10px;
}
.header {
  margin-bottom: 15px;
}
.header-title {
  color: #ffffff;
  font-weight: 400;
  font-size: 14px;
  font-family: Source Han Sans CN;

  opacity: 1;
}
</style>
